<template>
  <div class="mobile-monitor">
    <div class="mobile-monitor-box">
      <NavBar title="视频监控" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div class="monitor-picker">
        <van-field v-model="fieldValue" is-link readonly label="设备组" placeholder="选择设备组" @click="showPicker = true" />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker :columns="groups" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
      </div>
      <div class="monitor-monitor">
        <div class="video-item" v-for="(item) in groupDevice" :key="item">
          <div class="video-video">
            <Video :is-mobile="true" :key="item.id" :deviceId="item.deviceId" :autoplay="false"></Video>
          </div>
          <div class="video-name">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, defineModel, computed } from 'vue';
import { Field as vanField, Popup as vanPopup, Picker as vanPicker, NavBar } from 'vant'
import * as Api from '@/api/videoMonitor';
import Video from './video.vue';
import { useRouter } from 'vue-router';
import 'xgplayer/dist/index.min.css';

const router = useRouter();

const showPicker = ref(false);
const fieldValue = ref();
const selectId = ref();
const groupDevice = ref([]);
const groups = ref([]);
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
  selectId.value = selectedOptions[0].value;
  groupDevice.value = selectedOptions[0].children;
};
const onClickLeft = () => {
  router.push('/app-dashboard');
}
const getGroupTree = async () => {
  const res = await Api.getGroupTree();
  if (res) {
    // 设置第一个组为当前组
    fieldValue.value = res[0].name;
    selectId.value = res[0].id;
    groupDevice.value = [res[0].children[0]];
    groups.value = res.map((item) => {
      return {
        value: item.id,
        text: item.name,
        children: item.children
      }
    })
  }
}
onMounted(() => {
  getGroupTree();
})

</script>
<style lang="less" scoped>
.mobile-monitor {
  height: 100%;
  padding-bottom: 5vh;
  background-size: 100% 100%;

  .mobile-monitor-box {
    height: 100%;
    overflow-y: auto;

    .monitor-picker {
      padding-top: 10px;
    }

    .monitor-monitor {
      .video-item {
        margin: 3vh 2vh 0;
      }

      .video-video {
        height: 30vh;
        overflow: hidden;
        border-radius: 1vh;
        background: rgb(0 0 0 / 50%);
      }

      .video-name {
        padding-top: 5px;
        color: #000;
        font-size: 14px;
        line-height: 4vh;
      }
    }
  }
}
</style>
